/******************** 变量 ********************/

/******************** mixin ********************/
@mixin iconColorState($selector, $states) {
  #{ $selector } {
    color: nth($states, 1);

    &:hover {
      color: nth($states, 2);
    }

    &:active {
      color: nth($states, 3);
    }

    &:focus {
      color: nth($states, 4);
    }

    &:disabled,
    &[disabled] {
      color: nth($states, 5);
      cursor: not-allowed;
    }
  }
}

/******************** 组件 ********************/
.lv-icon {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: $line-height-base;
  pointer-events: none;
  fill: currentColor;
}

.lv-icon-host {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;

  @include icon-size;

  &:disabled,
  &[disabled] {
    color: $icon-color-disabled;
    cursor: not-allowed;
  }
}

.lv-icon-color-state {
  cursor: pointer;
}

@include iconColorState(
  '.lv-icon-host.lv-icon-color-state',
  ($icon-color, $icon-color-hover, $icon-color-active, $icon-color-focus, $icon-color-disabled)
);
